import React, { Component } from 'react'
import { NavBar, Icon } from 'antd-mobile'
import style from './Pay.module.scss'

export default class Pay extends Component {
    state={
        cartData:[],
        addressObj:{},
    }
    componentDidMount() {
        console.log(JSON.parse(localStorage.getItem("cart")))
        let cartData = JSON.parse(localStorage.getItem("cart"))
        
        this.setState({
            cartData,
        },()=>{
            console.log(this.state)
        })

    }
    //支付
    toPayMoney=()=>{
        console.log("pay")
    }
    render() {
        return (
            <div className={style.payContent}>
                <NavBar
                    className={style.payContentNav}
                    icon={<Icon type="left" />}
                    onLeftClick={() => window.history.go(-1)}
                >
                    <div className={style.payContentTitle}>搜索中心</div>
                </NavBar>
                <div className={style.payContentButton}>
                    <div className={style.ButtonAddress}>
                        选择地址
                   </div>
                </div>
                <div className={style.payContentSelectedGoods}>
                    <div className={style.selectGoods}>已选商品</div>

                    <div className={style.cartContentShoppingItem}>
                     
                        {this.state.cartData[0]?this.state.cartData.map((v, index) => {
                            if(!v.checked){return }
                            return <div className={style.cartContentShoppingItemList} key={v.goods_id}>
                                <div className={style.cartContentChecked}></div>
                                <img src={v.goods_small_logo} alt="" />
                                <div className={style.itemListTitle}>
                                    <div className={style.itemListTitleTop}>{v.goods_name}</div>
                                    <div className={style.itemListPrice}>
                                        <span>￥{v.goods_price}</span>
                                        <div className={style.itemListPriceButton}>                                
                                            <div className={style.itemListPriceNum}>x{v.num}</div>                                
                                        </div>
                                    </div>
                                </div>

                            </div>
                        }):""}
                    </div>

                </div>
                <div className={style.payBottom}>
                  
                    <div className={style.BottomTalPrice}>合计￥{this.state.cartData[0]?this.state.cartData[0].totalNum:""}</div>
                    <div className={!this.state.addressObj.address?style.BottomPay:style.BottomPay+" "+style.BottomPayColor} onClick={this.state.addressObj.address? this.toPayMoney:""}>去支付{this.state.cartData[0]?this.state.cartData[0].money:""}</div>
                </div>
            </div>
        )
    }
}